<!DOCTYPE html>
<html lang="en">
	<head>
		  
		<meta charset="UTF-8" />
		  
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		  
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			table {
				border-collapse: collapse;
				border-spacing: 0;
				border: 1px solid #c0c0c0;
			}

			th,
			td {
				border: 1px solid #d0d0d0;
				color: #404060;
				padding: 10px;
			}

			th {
				background-color: #09c;
				font: bold 16px '微软雅黑';
				color: #fff;
			}

			td {
				font: 14px '微软雅黑';
			}
			tbody tr {
				background-color: #f0f0f0;
			}
			tbody tr:hover {
				cursor: pointer;
				background-color: #fafafa;
			}
		</style>
	</head>
	<body>
		<!--   我们需要一个 数组 [年级className, [part1的一些信息, part2的一些信息]] -->
		<table id="table">
			<tr class="ttr"></tr>

			<tr class="ttr1"></tr>

			<tr class="ttr2"></tr>

			<tr class="ttr3"></tr>
		</table>
		  
		<script>
			var obj = {
				nine: [
					{
						level: 9,
						className: '九年级',
						classnum: [
							{ calsspart: 1, eatnum: 38 },
							{ calsspart: 2, eatnum: 44 },
							// { calsspart: 3, eatnum: 55 },
						],
					},
				],
				seven: [
					{
						level: 7,
						className: '七年级',
						classnum: [
							{ calsspart: 1, eatnum: 22 },
							{ calsspart: 2, eatnum: 33 },
						],
					},
				],
				eight: [
					{
						level: 8,
						className: '8年级',
						classnum: [
							{ calsspart: 1, eatnum: 88 },
							{ calsspart: 2, eatnum: 99 },
						],
					},
				],
			};
			var tb = document.getElementById('table');

			var ttr = document.querySelector('.ttr');

			var ttr1 = document.querySelector('.ttr1');
			var ttr2 = document.querySelector('.ttr2');
			var ttr3 = document.querySelector('.ttr3');

			var tdClass = document.createElement('td');
			tdClass.innerHTML = '班级';
			var tdPeople = document.createElement('td');
			tdPeople.innerHTML = '人数';
			var arr = [];
			for (var key in obj) {
				console.log(obj[key]);
				// var calsspart = obj[key][0].classnum;
				// var eatnum =  obj[key][0].eatnum;
				// arr.push([calsspart,eatnum]);
				var classnum = obj[key][0].classnum;
				// classnum.classLevel = obj[key][0].className;
				console.log(classnum);
				for (var k in classnum) {
					arr.push([classnum[k].calsspart, classnum[k].eatnum, obj[key][0].className]);
				}
			}
			console.log(arr); //  这个数据 是可行的

			for (var i = 0; i < arr.length; i++) {
				// var tr = document.cereateElement('tr');
				var tr = document.createElement('tr'); // console.log(arr[i]); // var td = document.createElement('td'); // td.innerHTML = arr[i][0];
				var tdPart = document.createElement('td'); // 班级数量

				// console.log(tdPart);
				var tdP = document.createElement('td');
				// console.log(tdP);
				if (i % 2 == 0) {
					tdPart.innerHTML = arr[i][0];
					tdP.innerHTML = arr[i][1]; // 人数
					ttr2.appendChild(tdPart);
					ttr2.appendChild(tdP);
				} else {
					tdPart.innerHTML = arr[i][0];
					tdP.innerHTML = arr[i][1]; // 人数
					ttr3.appendChild(tdPart);
					ttr3.appendChild(tdP);
				}

				var tbCurr = document.createElement('td'); //  当前的 班级
				tbCurr.innerHTML = arr[i][2];

				ttr.appendChild(tbCurr);
				//           年级
				//  是 第一行班级 人数     班级 人数   班级 人数        第二行人数 班级
				//     tr   td班  td人
				// var tr1 = document.createElement('tr');

				ttr1.innerHTML = `<td>班级</td><td>人数</td><td>班级</td><td>人数</td><td>班级</td><td>人数</td>`;

				// ttr2.innerHTML = `<td>${arr[i][0]}</td><td>${arr[i][1]}</td>`;
			}

			// insertAfter(newEle, oldEle);   //  使用  \\
		</script>

		<h1>test</h1>
		<table class="test">
			<tr>
				<td>00</td>
				<td>00</td>
				<td>00</td>
				<td>00</td>
				<td>00</td>
				<td>00</td>
			</tr>
			<tbody id="tb1">
				<!--  年级 -->
				<tr class="nianji">
					<!--  年级 的这个  他的属性是 colspan 是2 没试过用动态js 生成的时候 加属性是否可行 不过应该可行  我相信你可以做到 在for循环里写 classLever 网 nianji 这appendchild  -->
					<!-- clospan：跨度两个列  -->
					<td colspan="2">九年级</td>
					<!-- <td>一个格</td> -->
					<td colspan="2">八年级</td>

					<td colspan="2">7年级</td>
				</tr>

				<tr class="br">
					<!--  这一行渲染班级 和 人数 -->
				</tr>
			</tbody>
		</table>

		<script>
			console.log('===============================================================');
			// 但是上面的 是有问题的 给 九年级 加数据 就会引起错乱.
			const arr1 = [];
			const br = document.querySelector('.br'); // b 班级  r 人数 缩写
			const test = document.querySelector('.test');
			const tb1 = document.querySelector('#tb1');
			for (var key in obj) {
				console.log(obj[key]);
				arr1.push(obj[key]);
			}
			console.log(arr1);
			var tdHtml = '';
			for (let i = 0; i < arr1.length; i++) {
				// 长度是 3
				tdHtml += '<td>班级</td><td>人数</td>';
				// tdHtml += tdHtml;
				br.innerHTML = tdHtml;
			}
			console.log(tdHtml);
			// 可是 接下来的 如何写呢  先写下思路把
			// test.appendChild(document.createElement('td'));
			tb1.appendChild(document.createElement('td'));
			//  这个 元素 终于是插入在 tr 的 后面了  当然我们要做的并不是插入 td
			// 首先判断 arr1数组中 最长的 classnum 长度  然后 根据 这个生成 多少个 tr  这个tr 可以加 className 就是加 不同的类名 看需要把
			//  但是好像还是 不好写   。
			//  part1.innerHTML = `<td>arr1[i].classnum[0].classpart</td><td>arr1[i].classnum[0].eatnum</td>`     // 用 模板字符串 ￥ 号
			//  上面应该也是 继续拼接  就是 += 我不太确定  就是和198 行代码 那样

			//  就是到数据不一样的时候for 循环吧 循环最大长度的classnum  不仅是tr ，td也都要生成  先判断 是否有值 如果没有 就让 插入td的值为 ‘’ 就可 不能不渲染 。
			// 好像 也不好写    可能  韩老师那里写的代码 我给渲染错了  你看下吧
			//  <tr>
			// <td>1</td>
			// <td>33</td>
			// <td>1</td>
			// <td>44</td>
			// <td>1</td>
			// <td>55</td>
			//  </tr>
			//  <tr>
			// <td>2</td>
			// <td>36</td>
			// <td></td>                      首先把 数据 给集中起来  for (var i = 0; i < arrBig.length; i++) {}
			// <td></td>                       if (有 classNum [i]) 说明 这个 还有 则要 渲染数据  else td inHerhtml = ''
			// <td>2</td>                     他是 有part 和 人数呢 有的话都要写  之后则是 把这一行数据 插入到 tr中
			// <td>55</td>                    这点 反正不好写  而且 .. 我说的思路 可能错了 .. 栩ying 君 加油 😂
			//  </tr>
			//  <tr>
			// <td>3</td>
			// <td>44</td>
			// <td></td>
			// <td></td>
			// <td></td>
			// <td></td>
			//  </tr>
		</script>
	</body>
</html>
